<template>
  <div class="subject-bank-account">
    <a-row>
      <a-col :span="12">
        <a-descriptions :title="$t('all.autotext24')" />
      </a-col>
      <a-col :span="12" align="right">
        <a-dropdown
          placement="bottomCenter"
          v-if=" $options.filters.isPtsVisible() && $auth('PROJECT.PROJECT_PATIENT_EDIT') && !hasAppletType"
        >
          <a-button type="primary" style="margin-bottom: 10px;">
            {{ $t('all.autotext41') }}
          </a-button>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="add(1)">{{ $t('all.autotext283') }}</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="add(2)">{{ $t('all.autotext1750') }}</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </a-col>
    </a-row>
    <!-- <div class="subject-bank-account__wx-auth">
      <span>{{ WXAuthorized ? $t('all.autotext1210.1') : $t('all.autotext1210.2') }}</span>
      <a-button
        v-if="authorizeShow && $auth('PROJECT.PROJECT_PATIENT_EDIT')"
        type="link"
        @click="authorizeWX"
      >
        {{ WXAuthorized ? $t('all.autotext1139.1') : $t('all.autotext1139.2') }}
      </a-button>
    </div> -->
    <!-- <div style="margin-bottom: 15px;padding-left: 20px;">
      <a-tooltip>
        <template slot="title" v-if="hasUserAuthorizeId">
          受试者小程序未添加银行账户
        </template>
        <a-switch v-model="wechatBankStatus" @change="handleStatus" :disabled="hasUserAuthorizeId" />
        <span style="margin-left: 10px;">启动小程序</span>
      </a-tooltip>
    </div> -->
    <a-table
      row-key="id"
      :pagination="false"
      :data-source="tableData"
      :loading="tableLoading"
      :locale="{emptyText: this.WXAuthorized ? $t('all.autotext813') : $t('all.autotext1353')}"
    >
      <a-table-column :title="$t('all.autotext334')" key="id">
        <template slot-scope="text, record, index">
          <span>{{ getTableSequenceNo(index) }}</span>
        </template>
      </a-table-column>
      <a-table-column :title="$t('subject.autotext39')" key="authorizationAppletType" data-index="authorizationAppletType">
        <template slot-scope="text">
          <span>{{ text | enumValueByKey($const.AUTHORIZATION_TYPE, 'desc', 'PI/CRC') }}</span>
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext496')" key="bankType" data-index="bankType">
        <template slot-scope="text">
          <span>{{ text | enumValueByKey($const.BANK_TYPE) }}</span>
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext977')" key="bankAccount" data-index="bankAccount" />
      <a-table-column :title="$t('all.autotext497')" key="bankName" data-index="bankName" />
      <a-table-column
        v-if="$options.filters.isPtsVisible()"
        :title="$t('all.autotext1310')"
        key="bankCardNo"
        data-index="bankCardNo"
      >
        <template slot-scope="value">
          <!-- 受试者可见显示银行账号 -->
         <span v-if="$options.filters.isPtsVisible() ">{{ value }}</span>
          <span v-else>{{ value | cardNoDeal }}</span>
          <!-- <span v-if="+record.defaultCard === 1" style="marginLeft: 8px; color: #3D92FF;">{{ $t('all.autotext1335') }}</span> -->
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext20')" key="bankOpenInfo" data-index="bankOpenInfo" />
      <a-table-column title="启用账户" key="defaultCard" data-index="defaultCard" >
        <template slot-scope="value, record">
          <a-switch :checked="value === 1" @change="(e) =>handleStatus (record, e)" />
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext187')" v-if="$auth('PROJECT.PROJECT_PATIENT_EDIT')">
        <a-space slot-scope="record">
          <!-- <template v-if="!record.defaultCard">
            <a
              v-if="pts.ptsStatus != 6 && pts.ptsStatus != 3 && $auth('PROJECT.PROJECT_PATIENT_EDIT')"
              @click="setDefault(record)"
            >{{ $t('all.autotext159') }}</a>
            <a-popconfirm :title="$t('all.autotext635')" @confirm="remove(record)">
              <a v-if="pts.ptsStatus != 6 && pts.ptsStatus != 3 && $auth('PROJECT.PROJECT_PATIENT_EDIT')">{{ $t('all.autotext379') }}</a>
            </a-popconfirm>
          </template>
          <span v-else>{{ $t('all.autotext1335') }}</span> -->
          <a :disabled="record.authorizationAppletType !== 3" @click="add(record.bankType, record)">{{ $t('all.autotext919') }}</a>
          <a-tooltip v-if="record.authorizationAppletType !== 3">
            <template slot="title">
              {{ record.authorizationAppletType === 1 ? $t('subject.autotext45') : $t('subject.autotext46') }}
            </template>
            <a-icon type="question-circle" style="font-size: 18px;color: #666;" />
          </a-tooltip>
        </a-space>
      </a-table-column>
    </a-table>

    <addBank ref="backRef" :pts="pts" @refresh="getList()"/>

    <!-- 授权弹窗 -->
    <authorize
      ref="authorizeRef"
      :pts="pts"
      :WXAuthorized="WXAuthorized"
      @authorizeSuccess="authorizeSuccess"
    >
    </authorize>
  </div>
</template>

<script>
import authorize from './authorize'
import addBank from './addBank'
import { getBankList, delBank, setDefaultBank, canAuthorize, enableWechatBankAccount } from '@api/account/user'

export default {
  props: {
    pts: {
      type: Object
    }
  },
  components: { addBank, authorize },
  data () {
    return {
      tableLoading: false,
      tableData: [],
      authorizeShow: true,
      wechatBankStatus: false
    }
  },
  computed: {
    WXAuthorized () {
      return this.pts.authorizationAppletStatus === 1
    },
    hasUserAuthorizeId () {
      return !this.tableData?.some((e) => e.userAuthorizeId !== null)
    },
    hasAppletType () {
      return this.tableData.some((e) => e.authorizationAppletType === 3)
    }
  },
  created () {
    this.getList()
    this.getCanAuthorize()
  },
  methods: {
   
    modifyCardStatus (record, e) {
      this.tableLoading = true
      enableWechatBankAccount({ ptsId: this.pts.id, bankId: record.id, defaultCard: e ? 1 : 0 }).then(() => {
        this.getList()
      }).finally(() => {
        this.tableLoading = false
      })
    },
    handleStatus (record, e) {
      if (e) {
        return this.$confirm({
          title: '启用账户',
          content: () => <div><h4>是否启用当前账户作为收款账户，并停用其他账户？</h4><p style="font-size:12px;">提示：已经发起的费用申请仍将使用原账户</p></div>,
          onOk: () => {
            this.modifyCardStatus(record, e)
          }
        })
      } else {
        return this.$confirm({
          title: '停用账户',
          content: () => <div><h4>是否停用当前收款账户？</h4><p style="font-size:12px;">提示：已经发起的费用申请仍将使用原账户</p></div>,
          onOk: () => {
            this.modifyCardStatus(record, e)
          }
        })
      }
    },
    async getCanAuthorize () {
      const res = await canAuthorize({
        proId: this.pts.proId,
        ptsId: this.pts.id
      })
      this.authorizeShow = res
    },
    getTableSequenceNo (index) {
      return this.tableData.length - index
    },
    add (e, item) {
      this.$refs.backRef.open(e, item)
    },
    async setDefault (row) {
      await setDefaultBank({
        id: row.id,
        userAuthorizeId: this.pts.userAuthorizeId,
        ptsId: this.pts.id
      })
      this.$message.success(this.$t('all.autotext470'))
      this.getList()
    },
    async remove (row) {
      await delBank({ id: row.id })
      this.$message.success(this.$t('all.autotext470'))
      this.getList()
    },
    async getList () {
      const res = await getBankList({ authUserId: this.pts.userAuthorizeId, type: 2, ptsId: this.pts.id })
      this.tableData = res
    },
    authorizeWX () {
      if (this.WXAuthorized) {
        this.$refs.authorizeRef.open(false)
        return
      }
      if (this.pts.authStatus === 1 && this.pts.proManagePtsGuardian && this.pts.proManagePtsGuardian.authStatus === 1) {
        this.$refs.authorizeRef.open(true)
      } else if (this.pts.authStatus === 1 || (this.pts.proManagePtsGuardian && this.pts.proManagePtsGuardian.authStatus === 1)) {
        this.$refs.authorizeRef.open(false, this.pts.authStatus === 1 ? '1' : '2')
      } else {
        this.$message.error(this.$t('subject.autotext43'))
      }
    },
    authorizeSuccess () {
      this.getList()
      this.$emit('handleOk')
    }
  },
  watch: {
    pts: {
      handler (val) {
        if (!val?.id) return
        this.wechatBankStatus = !!val.wechatBankStatus
        this.getList()
      },
      deep: true,
      immediate: true
    }
   
  }
}
</script>

<style lang="less" scoped>
.subject-bank-account {
  .subject-bank-account__wx-auth {
    padding-bottom: 20px;
    padding-left: 20px;
  }
}
</style>
